<template>
  <div>
    <common-head title="商品详情"/>
    <div class="main" v-if="detail.basicInfo">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="pic in detail.pics" :key="pic.id">
          <img class="banner" :src="pic.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <h5>
        {{detail.basicInfo.name}}
      </h5>
      <div class="content" v-html="content"></div>
    </div>
    <!-- 弹出 商品 sku页 -->
    <van-popup v-model="skuShow" position="bottom" :style="{ height: '40%' }">
         <van-card
            :num="sku.num"
            :price="sku.minPrice"
            :title="sku.name"
            :thumb="sku.pic"
          >
            <template #footer>
              <van-button size="small" @click="addNum" plain type="default">+</van-button>
              <span>{{ sku.num }}</span>
              <van-button size="small" @click="reduceNum"  plain type="default">-</van-button>
            </template>
        </van-card>
        <van-button type="primary" size="large" @click="act">确认</van-button>
    </van-popup>
    <!-- 弹出 商品 sku页 -->
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="$router.push('/home')" />
      <van-goods-action-icon icon="cart-o" :badge="cart.lists.length?cart.lists.length:''" text="购物车" @click="$router.push('/cart')"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="showPopCart"/>
      <van-goods-action-button type="danger" text="立即购买" @click="showPopBuyNow"/>
    </van-goods-action>

  </div>
</template>

<script>
import { fetchItemById } from '@api'
import CommonHead from '@components/CommonHead'
import addCart from '../../mixins/addCart'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      detail: {

      },
      skuShow: false,
      sku: {
      },
      btn: 0
    }
  },
  created () {
    this.fetchItem()
  },
  mixins: [addCart],
  methods: {
    act () {
      // 加入购物车 或者 立即购买
      if (this.btn) {
        alert('立即购买')
      } else {
        this.add_cart(this.sku)
        this.skuShow = false
      }
    },
    showPopCart () {
      // 点击添加购物车  弹出 sku 规格
      this.skuShow = true
      this.btn = 0
    },
    showPopBuyNow () {
      // 点击立即购买 弹出 sku 商品规格
      this.skuShow = true
      this.btn = 1
    },
    addNum () {
      // 数量+
      this.sku.num++
      console.log(this.detail.basicInfo)
    },
    reduceNum () {
      this.sku.num--
      if (this.sku.num <= 1) {
        this.sku.num = 1
      }
    },
    fetchItem () {
      fetchItemById(this.$route.params.id).then(res => {
        if (res.data.code === 0) {
          this.detail = res.data.data
          this.sku = {
            ...this.detail.basicInfo,
            num: 1,
            isChecked: true
          }
        }
      })
    }
  },
  computed: {
    content () {
      return this.detail.content.replace(/<img/g, "<img style='vertical-align:bottom;width:100%'")
    },
    ...mapState(['cart'])
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/common.css";
.banner{
  width:100%;
}
/* .content /deep/ img{
  vertical-align: bottom;
  width:100%;
} */
.van-card__content{
  justify-content: space-around;
}
</style>
